<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <#include "../common/header.ftl"/>

    <link rel="stylesheet" href="/js/plugins/treeview/bootstrap-treeview.min.css" type="text/css" />
    <script type="text/javascript" src="/js/plugins/treeview/bootstrap-treeview.min.js"></script>

    <script>
        $(function () {
            //发送异步请求获取treeview的json对象
            $.get("/region/queryByParentId.do",{type:"tree"},function (data) {
                $('#treeview').treeview({
                    data: [{text:"全部地区",nodes:data}],
                    showTags: true,
                    lazyLoad:function (node) {
                        //console.log(node);
                        $.get("/region/queryByParentId.do",{parentId: node.id,type:"tree"},function (data) {
                             //console.log(data)
                            $('#treeview').treeview('addNode', [data , node]);
                        })
                    },
                    onNodeSelected: function (event,node) {
                        $.get("/region/queryByParentId.do",{parentId: node.id},function (data) {
                            $("tbody").html("");
                            var temp = "";
                            $.each(data,function (index,ele) {
                                var commendHtml = "设为推荐";
                                if (ele.state) {
                                    commendHtml = "取消推荐";
                                }
                                temp = temp + "<tr><td>"+(index + 1)+"</td><td>"+ele.name+"</td>" +
                                    "<td><a role='button' class='editBtn' data-json="+ele.json+">修改</a></td>" +
                                    "<td><a role='button' class='commendBtn' data-json="+ele.json+">"+commendHtml+"</a></td></tr>";

                                $("tbody").html(temp);
                            })
                            $(".editBtn").click(function () {
                                $("#editForm input").val("");
                                var temp = $(this).data("json");
                                //console.log(temp);
                                $("#regionId").val(temp.id);
                                $("#editForm input[name='name']").val(temp.name);

                                $("#editForm input[name='parent.id']").val(node.id);
                                $("#editForm input[name='parent.name']").val(node.text);
                                $("#regionModal").modal("show");
                            })

                            $(".commendBtn").click(function () {
                                var temp = $(this).data("json");
                                //console.log(temp);
                                if (temp.state == 1) {
                                    $.get("/region/changeState.do",{id:temp.id,state:0},function () {
                                        $.messager.confirm("温馨提示","修改成功",function(){
                                            window.location.reload();
                                        });
                                    })
                                }else {
                                    $.get("/region/changeState.do",{id:temp.id,state:1},function () {
                                        $.messager.confirm("温馨提示","修改成功",function(){
                                            window.location.reload();
                                        });
                                    })
                                }
                            })

                        })
                    }
                })
            })

            //添加新的地区
            $("#addRegionBtn").click(function () {
                var node = $('#treeview').treeview('getSelected');
                if (node.length) {
                    //alert($);
                    //console.log(node[0].text);
                    //console.log(node[0].id);
                    $("#editForm input").val("");
                    $("#editForm input[name='parent.id']").val(node[0].id);
                    $("#editForm input[name='parent.name']").val(node[0].text);
                }else {
                    $.messager.alert("温馨提示","未选择上级地区,本次添加的为一级地区!");
                }
                $("#regionModal").modal("show");
            })

            $("#editForm").ajaxForm(function(data){
                $.messager.confirm("温馨提示","保存成功",function(){
                        window.location.reload();
                });
            });

            $("#saveBtn").click(function(){
                $("#editForm").submit();
            });
            $.messager.model = {
                ok: {text: "确定"},
                cancel: {text: "取消"}
            };

        })
    </script>

</head>

<body>
<div class="container">
<#include "../common/top.ftl"/>
    <div class="row">
        <div class="col-sm-3">
		<#assign currentMenu = "region" />
				<#include "../common/menu.ftl" />
        </div>
        <div class="col-sm-9">
            <div class="page-header">
                <h3>地区管理</h3>
            </div>
            <div class="row">
                <div class="form-group" style="margin-left: 20px">
                    <a href="javascript:void(-1);" class="btn btn-success" id="addRegionBtn">添加地区</a>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-4">
                    <div id="treeview"></div>
                </div>

                <div class="col-sm-8">
                 <table class="table">
                    <thead>
                    <tr>
                        <th>序号</th>
                        <th>名称</th>
                    </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>

                </div>
            </div>
         </div>
    </div>
</div>

<!--地区模态框-->
<div id="regionModal" class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">编辑/增加</h4>
            </div>
            <div class="modal-body">
                <form id="editForm" class="form-horizontal" method="post" action="/region/saveOrUpdate.do" >
                    <input id="regionId" type="hidden" name="id" value="" />
                    <div class="form-group">
                        <label class="col-sm-4 control-label">名称</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control"  name="name" placeholder="地区/景区名称">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-4 control-label">上级地区</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control"  name="parent.name" readonly >
                            <input type="hidden" class="form-control"  name="parent.id" >
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <a href="javascript:void(0);" class="btn btn-success" id="saveBtn" aria-hidden="true">保存</a>
                <a href="javascript:void(0);" class="btn" data-dismiss="modal" aria-hidden="true">关闭</a>
            </div>
        </div>
    </div>
</div>

</body>
</html>